//绘制用离职与未离职作比较的关于 平均每月工作时长 和 工作年限 的柱状图
function draw_barchart(){
    
    d3.csv("data/csv/HR_comma_sep.csv").then(d=>{
        //console.log(d)
        //把数据中的字符串转换为数字
        d.forEach(d => {
            d['satisfaction_level']= +(d['satisfaction_level'])
            d['last_evaluation']= +(d['last_evaluation'])
            d['average_montly_hours']= +(d['average_montly_hours'])
            d['time_spend_company']= +(d['time_spend_company'])
            d['Work_accident']= +(d['Work_accident'])
            d['promotion_last_5years']= +(d['promotion_last_5years'])
            d['left']= +(d['left'])
        });

        //var maxSatis=1,minSatis=0; //代表最低和最高的满意度 为交互预留的
        //var maxEvalu=1,minEvalu=0; //代表最低和最高的绩效
        //var waccident=0,promotion=0; //代表是否发生过意外或者升职
        var sl='satisfaction_level'; //实在是太长了所以缩减了一下
        var le='last_evaluation';
        var leftsumM=0,leftsumT=0,leftnum=0; //离职人的 平均每月工作时长 和 工作年限 的和
        var noleftsumM=0,noleftsumT=0,noleftnum=0; //未离职人的 平均每月工作时长 和 工作年限 的和

        if(tableData.length==0){
            for(let i=0;i<d.length;i++){
                //判断是否满足限定条件
                if(d[i][sl]>=minSatis&&d[i][sl]<=maxSatis&&d[i][le]>=minEvalu&&d[i][le]<=maxEvalu){
                    if(d[i]['Work_accident']==waccident&&d[i]['promotion_last_5years']==promotion){
                        if(d[i]['left']==1){
                            leftsumM=leftsumM+d[i]['average_montly_hours']
                            leftsumT=leftsumT+d[i]['time_spend_company']
                            leftnum++;
                        }else{
                            noleftsumM=noleftsumM+d[i]['average_montly_hours']
                            noleftsumT=noleftsumT+d[i]['time_spend_company']
                            noleftnum++;
                        }
                    }else if(waccident==-1&&d[i]['promotion_last_5years']==promotion){
                        if(d[i]['left']==1){
                            leftsumM=leftsumM+d[i]['average_montly_hours']
                            leftsumT=leftsumT+d[i]['time_spend_company']
                            leftnum++;
                        }else{
                            noleftsumM=noleftsumM+d[i]['average_montly_hours']
                            noleftsumT=noleftsumT+d[i]['time_spend_company']
                            noleftnum++;
                        }
                    }else if(d[i]['Work_accident']==waccident&&promotion==-1){
                        if(d[i]['left']==1){
                            leftsumM=leftsumM+d[i]['average_montly_hours']
                            leftsumT=leftsumT+d[i]['time_spend_company']
                            leftnum++;
                        }else{
                            noleftsumM=noleftsumM+d[i]['average_montly_hours']
                            noleftsumT=noleftsumT+d[i]['time_spend_company']
                            noleftnum++;
                        }
                    }else if(waccident==-1&&promotion==-1){
                        if(d[i]['left']==1){
                            leftsumM=leftsumM+d[i]['average_montly_hours']
                            leftsumT=leftsumT+d[i]['time_spend_company']
                            leftnum++;
                        }else{
                            noleftsumM=noleftsumM+d[i]['average_montly_hours']
                            noleftsumT=noleftsumT+d[i]['time_spend_company']
                            noleftnum++;
                        }
                    }
                }
            } 
        }else{
            for(let i=0;i<tableData.length;i++){
                //判断是否满足限定条件  
                //console.log(tableData);
                if(d[tableData[i]]['left']==1){
                    leftsumM=leftsumM+d[tableData[i]]['average_montly_hours']
                    leftsumT=leftsumT+d[tableData[i]]['time_spend_company']
                    leftnum++;
                }else{
                    noleftsumM=noleftsumM+d[tableData[i]]['average_montly_hours']
                    noleftsumT=noleftsumT+d[tableData[i]]['time_spend_company']
                    noleftnum++;
                }
            }
        }
        
        //console.log(leftsumM)
        //console.log(leftsumT)
        if(leftnum==0) leftnum=1;
        if(noleftnum==0) noleftnum=1;

        //用来存储离职与未离职的人的数据
        var data =[
            {'name':"离职人员",'平均每月工作时长':(leftsumM/leftnum).toFixed(1),'平均工作年份':(leftsumT/leftnum).toFixed(2)},
            {'name':"未离职人员",'平均每月工作时长':(noleftsumM/noleftnum).toFixed(1),'平均工作年份':(noleftsumT/noleftnum).toFixed(2)},
        ]
        //console.log(data)
        var conf ={
            height:300,
            width:300,
            margian:{
                top:50,
                bottom:30,
                left:40,
            }
        }
        const innerHeight = conf.height-conf.margian.top-conf.margian.bottom;
        const innerWidth = conf.width-2*conf.margian.left;
        var svg = d3.select("#barchart-svg")
            .attr('height',conf.height).attr('width',conf.width)

        svg.selectAll('*').remove()

        if(data[0]['平均每月工作时长']==0&&data[1]['平均工作年份']==0){
            const yScaleLeft=d3.scaleLinear().domain([0,200])
            .range([innerHeight,0]).nice()  //配置左边的y轴比例尺
            const yScaleRight=d3.scaleLinear().domain([0,4])
                .range([innerHeight,0]).nice()  //配置右边的y轴比例尺
            
            const xScale=d3.scaleBand().domain(data.map(d=>d.name))
                .range([0,innerWidth])
                .padding(0.6)  //x轴比例尺
            //console.log(xScale('未离职人员'))
            var g=svg.append('g').attr('transform',`translate(${conf.margian.left},${conf.margian.top})`)

            //画左边的y轴
            const yleftAxis = d3.axisLeft(yScaleLeft)//.ticks(6);
            g.append('g').call(yleftAxis).attr('id','yleftAxis').attr('color','#98F5FF')

            //画右边的y轴
            const yrightAxis = d3.axisRight(yScaleRight);
            g.append('g').call(yrightAxis).attr('id','yrightAxis').attr('color','#98F5FF')
            .attr('transform',`translate(${innerWidth},${0})`)

            //画x轴
            const xAxis = d3.axisBottom(xScale);
            g.append('g').call(xAxis).attr('id','xAxis').attr('color','#98F5FF')
            .attr('transform',`translate(${0},${innerHeight})`)

            //给左边加上数字
            g.selectAll('.text1')
            .data(data)
            .join('text').attr('class','text1')
            .attr('x',function(d){
                return xScale(d.name)-17;
            })
            .attr('y',function(d){
                return yScaleLeft(d['平均每月工作时长'])-3
            })
            .attr('fill','white')
            .text(d=>d['平均每月工作时长'])
            .attr('font-size',13)

            // 给右边加上的数字
            g.selectAll('.text2')
            .data(data)
            .join('text').attr('class','text2')
            .attr('x',function(d){
                return xScale(d.name)+21;
            })
            .attr('y',function(d){
                return yScaleRight(d['平均工作年份'])-3
            })
            .attr('fill','white')
            .text(d=>d['平均工作年份'])
            .attr('font-size',13)

        }else{
            const yScaleLeft=d3.scaleLinear().domain([0,d3.max(data,d=>d['平均每月工作时长'])])
                .range([innerHeight,0]).nice()  //配置左边的y轴比例尺
            const yScaleRight=d3.scaleLinear().domain([0,d3.max(data,d=>d['平均工作年份'])])
                .range([innerHeight,0]).nice()  //配置右边的y轴比例尺
            
            const xScale=d3.scaleBand().domain(data.map(d=>d.name))
                .range([0,innerWidth])
                .padding(0.6)  //x轴比例尺
            //console.log(xScale('未离职人员'))

            var g=svg.append('g').attr('transform',`translate(${conf.margian.left},${conf.margian.top})`)

            //画左边的y轴
            const yleftAxis = d3.axisLeft(yScaleLeft)//.ticks(6);
            g.append('g').call(yleftAxis).attr('id','yleftAxis').attr('color','#98F5FF')

            //画右边的y轴
            const yrightAxis = d3.axisRight(yScaleRight);
            g.append('g').call(yrightAxis).attr('id','yrightAxis').attr('color','#98F5FF')
            .attr('transform',`translate(${innerWidth},${0})`)

            //画x轴
            const xAxis = d3.axisBottom(xScale);
            g.append('g').call(xAxis).attr('id','xAxis').attr('color','#98F5FF')
            .attr('transform',`translate(${0},${innerHeight})`)
            //画左边的柱子 平均每月工作时长
            g.selectAll('.rect1')
            .data(data)
            .join('rect').attr('class','rect1')
            .attr('width',xScale.bandwidth())
            .attr('height',0)
            .attr('x',function(d){
                return xScale(d.name)-17;
            })
            .attr('y',innerHeight)
            .attr('fill','rgb(255,255,179)')
            .transition()
            .duration(2000)
            .attr('height',function(d){
                return innerHeight-yScaleLeft(d['平均每月工作时长']);
            })
            .attr('y',d=>yScaleLeft(d['平均每月工作时长']))

            //给柱子顶端加上数字
            g.selectAll('.text1')
            .data(data)
            .join('text').attr('class','text1')
            .attr('x',function(d){
                return xScale(d.name)-17;
            })
            .attr('y',innerHeight)
            .attr('fill','white')
            .text(d=>d['平均每月工作时长'])
            .attr('font-size',13)
            .transition()
            .duration(2000)
            .attr('y',function(d){
                return yScaleLeft(d['平均每月工作时长'])-3
            })

            // 画右边柱子
            g.selectAll('.rect2')
            .data(data)
            .join('rect').attr('class','rect2')
            .attr('width',xScale.bandwidth())
            .attr('height',0)
            .attr('x',function(d){
                return xScale(d.name)+17;
            })
            .attr('y',innerHeight)
            .attr('fill','rgb(253,180,98)')
            .transition('bottom')
            .duration(2000)
            .attr('height',function(d){
                return innerHeight-yScaleRight(d['平均工作年份']);
            })
            .attr('y',d=>yScaleRight(d['平均工作年份']))

            // 画右边柱子上的数字
            g.selectAll('.text2')
            .data(data)
            .join('text').attr('class','text2')
            .attr('x',function(d){
                return xScale(d.name)+21;
            })
            .attr('y',innerHeight)
            .attr('fill','white')
            .text(d=>d['平均工作年份'])
            .attr('font-size',13)
            .transition()
            .duration(2000)
            .attr('y',function(d){
                return yScaleRight(d['平均工作年份'])-3
            })

        }
        //构造图例所需数组
        var data_legend=[
            {'name':'每月工作时长', 'color':'rgb(255,255,179)'},
            {'name':'工作年份', 'color':'rgb(253,180,98)'}
        ]
        
        //图例
        var legend=svg.append('g').attr('id','legend')
        
        legend.selectAll('.legend')
        .data(data_legend)
        .join('g').attr('class','legend')
        .attr('transform',(d,i)=>`translate(${innerWidth+20},${i*18+15})`)

        //绘制文字
        legend.selectAll('.legend')
        .append('text')
        .text(d=>d.name)
        .attr('fill','white')
        .attr('text-anchor','end')
        .attr('font-size','11')
        
        //绘制颜色块
        legend.selectAll('.legend')
        .append('rect')
        .attr('height',10)
        .attr('width',20)
        .attr('fill',d=>d.color)
        .attr('x',8)
        .attr('y',-8)

        //画标题
        // svg.append('text')
        // .text('职工工作时长柱状图')
        // .attr('transform','translate(20,28)')
        // .attr('fill','#98F5FF')
        // .attr( "font-weight", "bold" )
    })

}